<template>
  <div class="components-body">
    <svg-icon :icon-class="itemData.tagIcon" />
    {{ itemData.label }}
  </div>
</template>

<script>
export default {
  name: 'panel',
  props: {
    itemData: Object
  }
}
</script>

<style lang="scss" scoped>
$selectedColor: #f6f7ff;
$lighterBlue: #409eff;
.components-body {
  padding: 8px 10px;
  background: $selectedColor;
  font-size: 12px;
  cursor: move;
  border: 1px dashed $selectedColor;
  border-radius: 3px;
  .svg-icon {
    color: #777;
    font-size: 15px;
  }
  &:hover {
    border: 1px dashed #787be8;
    color: #787be8;
    .svg-icon {
      color: #787be8;
    }
  }
}
</style>